import React,{useState} from 'react'
import '../static/less/login.less'
import { Link,useNavigate } from 'react-router-dom'

export default function Login() {
    let [account,setAccount] = useState("");
    let [pass,setPass] = useState("");
    let [account2,setAccount2] = useState(localStorage.getItem("account"));
    let [pass2,setPass2] = useState(localStorage.getItem("pass"));
    let navigate = useNavigate();
    const isLogin = (account1,pass1)=>{
        console.log(account1,pass1);
        if(account1 == account2 && pass1 == pass2){
            alert("登录成功");
            navigate("/home");
        }
        else{
            alert("账号或密码不正确");
        }
    }
    return (
        <div className='login'>
            <div className='top'>
                <Link to={`/home`}>
                    <div className='back'></div>
                </Link>
                <h2 className='top-title'>登录</h2>
            </div>
            <div className="bottom">
                <div className='inp-div'>
                    <input className='inp' type="text" placeholder='请输入账号' value={account} onChange={(event)=>{
                        let v = event.currentTarget.value;
                        setAccount(v)
                    }}/>
                </div>
                <div className='inp-div'>
                    <input className='inp' type="text" placeholder='请输入密码' value={pass} onChange={(event)=>{
                            let v = event.currentTarget.value;
                            setPass(v)
                    }}/>
                </div>
                <div className='btn-div'>
                    <button className='btn' onClick={()=>{
                        isLogin(account,pass);
                    }}>登录</button>
                </div>
                <div className='text-div'>
                    <Link to={`/register`}>
                        <span>注册</span>
                    </Link>
                    <span onClick={()=>{
                        setAccount("");
                        setPass("");
                    }}>重置</span>
                </div>
            </div>
        </div>
    )
}
